<template>
    <!-- 头部 -->
    <div class="header">
        <div class="title">植物园生物多样性综合观测站</div>
        <div class="nav-menu">
          <div class="menu-tabs">
            <div  class="tab-item" @click="handleMenuSelect(item.key)" :key="item.key" :class="{ active: activeMenu === item.key }"  active-class="active" v-for="item in menuItems"
                  @mouseenter="item.showDropdown = true"
                  @mouseleave="item.showDropdown = false">
                <div>{{ item.name }}</div>
                <!-- 下拉菜单 -->
                <transition name="slide-fade">
                    <div class="dropdown-menu" v-show="item.showDropdown&&item.item">
                        <div
                                class="dropdown-item"
                                v-for="itemC in item.item"
                                :key="itemC.key"
                                @click="handleMenuSelect(itemC.key)"
                        >
                            {{ itemC.name }}
                        </div>
                    </div>
                </transition>
            </div>
          </div>
        </div>
      </div>
</template>
<script>
import {EventBus} from "../utils/event-bus";

export default {
    computed: {
        speciesSelect() {
            return this.$store.state.speciesSelect
            // 或者使用 getter
            // return this.$store.getters.getSharedVariable
        }
    },
    data() {
        return {
            showDropdown: [false,false,false,false,false],
            activeMenu: this.getActiveMenuFromRoute(),
            menuItems: [
                { name: '首页', key: 'home', path: '/',showDropdown:false },
                { name: '物种观测', key: 'null', path: '/SpeciesAccount',showDropdown:false ,
                item:[{ id: 'huizong', key: 'SpeciesAccount',name: '人工调查',total: 0, deviceData: '',type: '统计' },
                    { id: 'zidong', key: 'SpeciesStatisticsAuto',name: '自动监测',total: 0, deviceData: '',type: '统计' }]},
                { name: '环境监测', key: 'BiologicalObservation', path: '/BiologicalObservation',showDropdown:false },
                { name: '固定样地', key: 'PermanentPlot', path: '/PermanentPlot',showDropdown:false },
                { name: '科普展示', key: 'ExperienceRoad', path: '/ExperienceRoad',showDropdown:false },
                // { name: '生多指标', key: 'MultipleIndicators', path: '/MultipleIndicators' }
            ]
        }   
    },
    watch: {
        '$route'(to) {
            // 检查路由路径是否包含'HabitatObservation'
            if(to.path.includes('HabitatObservation')||to.path.includes('SpeciesObservation')||to.path.includes('SpeciesStatisticsAuto')){
                this.activeMenu = 'SpeciesAccount';
            } else {
                EventBus.$emit('showRarePlant', []);
                this.activeMenu = this.getActiveMenuFromRoute(to.path);
            }
        }
    },
    methods: {
        getActiveMenuFromRoute(path = this.$route.path) {
            if (path === '/') return 'home';
            EventBus.$emit('clear-identify', []);
            // 移除开头的斜杠，获取路由名称
            const routeName = path.substring(1);
            // 查找匹配的菜单项
            const menuItem = this.menuItems.find(item => item.path.substring(1) === routeName);
            return menuItem ? menuItem.key : 'home';
        },
        handleMenuSelect(menu) {
            EventBus.$emit("set-polygons", []);
            EventBus.$emit('set-markers', []);
            EventBus.$emit('set-lines', []);
            EventBus.$emit('sent-heat-map-data', []);

            // EventBus.$emit('sent-heat-map-data', {data: []})
            // this.$store.commit('updateSpeciesSelect', 'huizong');
            if (menu === 'home') {
                this.$router.push({ path: '/' });
            } else if (menu === 'null') {
                return;
            } else {
                this.$router.push({ path: menu });
            }
            this.activeMenu = menu;
        }
    }
}
</script>
<style scoped lang="scss">
.header {
  height: 85px;
  background-image: url('../assets/img/header-bg.png');
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 10000;
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

}

.header .title {
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  line-height: 85px;
  text-align: center;
}

.nav-menu {
  position: fixed;
  top: 105px;
  left: 28%;
  width: 44%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.nav-menu .menu-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: auto;
  border-radius: 6px;
}

.nav-menu .menu-tabs .tab-item {
  padding:0px 24px;
  height: 38px;
  line-height: 38px;
  color: #ccc;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  background: #063C6A;
  text-align: center;
  border: 1px solid #2A5E8A;
  border-right: none;
  pointer-events: auto;
  &:first-child{
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
  }
  &:last-child{
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
  }
}

.nav-menu .menu-tabs .tab-item:last-child {
  border-right: 1px solid #2A5E8A;
}

.nav-menu .menu-tabs .tab-item:hover {
  color: #fff;
}

.nav-menu .menu-tabs .tab-item.active {
  color: #fff;
  background-image: url('@/assets/img/nav-item-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
